<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
	<title>NovelFaces</title>
	<meta charset="UTF-8" />
	<link rel="shortcut icon" href="#{request.contextPath}/resources/images/favicon.ico" />
	<link rel="icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/html5reset-1.6.1.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/nf-theme/jquery-ui-1.8.7.custom.css" />
	<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/main.css" />
	<h:outputScript library="novelfaces/js" name="jquery-1.4.4.min.js"/>
	<h:outputScript library="novelfaces/js" name="jquery-ui-1.8.7.custom.min.js"/>
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<ui:insert name="head"></ui:insert>
	<script>
		var ajaxBusy = false;
		$(function(){
			jsf.ajax.addOnEvent(statusUpdate);
		});
		
		function statusUpdate(data) {
			if(data.status == 'begin'){
				ajaxBusy = true;
			} else {
				ajaxBusy = false;
			}
		}
	</script>
</h:head>
<h:body>
	<div id="wrapper" >
		<f:view>
			<header id="logo" class="ui-helper-clearfix ui-widget-content ui-corner-top">
				<h:outputLink value="#{facesContext.externalContext.requestContextPath}" title="#{rb.home}">
					<h:graphicImage library="images" name="logo_114x100.png" />
				</h:outputLink>
				<div id="headerTitle"  >
					<h1 id="novel">Novel</h1>
					<h1 id="faces">Faces</h1>
					<h5>#{rb.header_subtitle}</h5>
				</div>
				<nav>
					<h:form id="headerForm">
						<p:toolbar id="toolbarHeader">
							<p:toolbarGroup align="left"> 
								<p:commandButton image="ui-icon-home" action="home?faces-redirect=true" ajax="false" value="#{rb.home}"/>
								<p:commandButton image="ui-icon-arrowreturnthick-1-s" action="download?faces-redirect=true" ajax="false" value="#{rb.download}"/>
							</p:toolbarGroup>
						</p:toolbar>
					</h:form>
				</nav>
			</header>
			<div id="content" class="ui-helper-clearfix ui-widget-content">
				<div id="maincol" class="ui-helper-clearfix">
					<section>
						<header class="ui-widget-header ui-corner-all">
							<h3 id="contentHeader"><ui:insert name="content_header">...</ui:insert></h3>
						</header>
						<section id="mainContent">
							<ui:insert name="content">...</ui:insert>
						</section>
					</section>
				</div>
				<nav id="nav">
					<section class="ui-widget-content ui-corner-all">
						<header class="ui-widget-header ui-corner-top">
							<h3>#{rb.components}</h3>
						</header>
						<h:form id="navForm">
							<ul>
								<li><h:commandLink  action="numpadDecSeparator?faces-redirect=true" value="#{rb.numpad_dec_separator}"/></li>
								<li><h:commandLink  id="main" action="main?faces-redirect=true" value="Main"/></li>
								<li><h:commandLink action="main2?faces-redirect=true" value="Main2"/></li>
							</ul>
						</h:form>
					</section>
				</nav>
			</div>
			<footer id="footer" class="ui-widget-content ui-corner-bottom">footer</footer>
		</f:view>
	</div>	
</h:body>
</html>